<template>
    <div class="on-sale-good-car">
        <div class="search-content">
			<el-select v-model="searchContent.search_key" placeholder="会员名">
                <el-option
                    v-for="item in searkeyList"
                    :label="item.search_value"
                    :key="item.id" 
                    :value="item.id">
                </el-option>
            </el-select>
            
            :<el-input class="search-content-input" v-model="searchContent.search_value" placeholder=""></el-input>
            <span class="putaway-time-label">&nbsp;&nbsp;&nbsp;&nbsp;排序：</span>
			<el-select v-model="searchContent.search_sort" placeholder="注册时间">
                <el-option
                    v-for="item in sortList"
                    :label="item.sortname"
                    :key="item.search_sort"
                    :value="item.search_sort">
                </el-option>
            </el-select>
			<el-select v-model="searchContent.search_state" placeholder="会员状态">
                <el-option
                    v-for="item in stateList"
                    :label="item.statename"
                    :key="item.search_state"
                    :value="item.search_state">
                </el-option>
            </el-select>
			<el-select v-model="searchContent.search_heavy_buyer" placeholder="大客户集团名称">
                <el-option
                    v-for="item in jituanList"
                    :label="item.value"
                    :key="item.name"
                    :value="item.name">
                </el-option>
            </el-select>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>        
        <div class="search-list">
            <el-table :data="memberList" border :height="oHeight">
                <el-table-column align="center" type="selection" width="55">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="member_id"
                    label="ID"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="member_name"
                    label="会员名"
                    min-width="120"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="company"
                    label="大客户集团单位名"
                    min-width="120"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="member_login_num"
                    label="登录次数"
                    min-width="120"
                ></el-table-column>                                
                <el-table-column
                    align="center"

                    label="最后登录"
                    min-width="120">
                    <template slot-scope="scope">
                       <span>{{scope.row.member_login_time}}<br>{{scope.row.member_login_ip}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="member_points"
                    label="会员元宝"
                    min-width="120"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    label="登录"
                    min-width="100">
                        <template slot-scope="scope">
                        <div>
                            <span v-show="scope.row.member_state==0">否</span>
                            <span v-show="scope.row.member_state==1">是</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="member_cars_count_cache"
                    label="座驾数量"
                    min-width="100"
                >
                </el-table-column>
                <!-- <el-table-column
                    align="center"
                    prop="store_id"
                    label="店铺"
                    min-width="120"
                >
                </el-table-column> -->
                <el-table-column
                    align="center"
                    label="操作"
                    min-width="190">
                        <template slot-scope="scope">
                            <el-button @click="memberDetail(scope.row.member_id)" type="primary" size="mini">查看</el-button>
                            <el-button @click="memberEdit(scope.row.member_id)" type="primary" size="mini">编辑</el-button>
                            <el-button @click="operaPoint(scope.row.member_id, scope.row.member_points)" type="primary" size="mini" style="margin-top: 10px;">操作积分</el-button>
                            <el-button v-if="scope.row.member_state==0" @click="liftAban(scope.row)" type="primary" size="mini" style="margin-top: 10px;">解禁</el-button>
                        </template>                    
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <!-- <el-button
                        size="mini"
                        type="primary"
                        class="btn-bottom"
                        @click="expertData"
                        >导出</el-button
                    > -->
					<el-button
                        size="mini"
                        type="primary"
                        class="btn-bottom"
                        
						@click="showFn('')"
                        >新增会员</el-button
                    >
                    <!-- <button type="button" class="btn-bottom" @click="showDeleteDialog">删除</button> -->
                </div>
                <!--分页部分-->
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.eachNum"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
		<default-opr ref="ceshi"></default-opr>
        <member-det ref="detail"></member-det>
        <member-edit ref="edit" @closeEdit="closeEdit"></member-edit>
        <point-opr ref="operation"></point-opr>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import defaultOpr from './default-opr';
import memberDet from './member-detail';
import memberEdit from'./edit-member';
import pointOpr from './operation-point'
export default {
    components: {defaultOpr,memberDet,memberEdit,pointOpr},
    data() {
        return {
            memberList: [],
            oHeight: 800,
            searchContent: {
                eachNum:localStorage.getItem('eachNum') * 1 || 10,//
                page:1,
                search_value:'',
                search_key:'0',
                search_state:'',
                search_sort:'',
                search_heavy_buyer:''
            },          
            searchObj:{},
            searkeyList:[
                {id:'0','search_value':'会员名'},
                {id:'1','search_value':'邮箱'},
                {id:'2','search_value':'姓名'},
                {id:'3','search_value':'手机号'}
            ],
            sortList:[
                {search_sort:'member_time ','sortname':'注册时间'},
                {search_sort:'member_login_time ','sortname':'最后登录时间'},
                {search_sort:'member_login_num ','sortname':'登录次数'}
            ],
            stateList:[
                {search_state:1,statename:'禁止登录'},
                {search_state:2,statename:'违规账号'}
            ],
            jituanList:[],
            total: 0,
            needUnshelveGoods: null,
            dialogVisible: false,
            dialogMsg: ''
        };
	},
	created(){
		this.getList();
	},
    methods: {
    reset_headers_params(row) {
                    // this.parameterForm
                    // {username:dsx,passwd:123}-----输入类型
                    // [{name:"username",value:"dsx"},{name:'passwd',value:'123'}]   ---输出类型
                    if (row) {
                        var params_data = []
                        var parameterObj =  row;               
                        for (var num in parameterObj) {
                            var params = {}
                            params['name'] = num
                            params['value'] = parameterObj[num]  //组装成对象
                            params_data.push(params) //添加到数组
                        }
                        this.parameterForm = params_data //初始化到parameterForm
                        return params_data;
                    } else {
                        this.form.params = undefined;
                        this.form.headers = undefined
                    }
                }, 
        // 新增会员
		showFn(data){
            this.$refs.ceshi.show_dialog_fn(data);
            // this. $nextTick.ceshi.show_dialog_fn();
        },
        // 详情
        memberDetail(id){
            this.$refs.detail.show_dialog_fn(id);
        },  
        //编辑
        memberEdit(id){
             this.$refs.edit.show_dialog_fn(id);
        },
        //操作积分
        operaPoint(id, member_points = 0){
            this.$refs.operation.show_dialog_fn(id, member_points);
        },
        //解禁
        liftAban(row){
            let that = this;
            this.$confirm("确认解禁")
                .then((res) => {
                  //   let data=JSON.parse(JSON.stringify(row));;
                  //  data.member_state=1;
                    let rowdata={
                        	member_id:row.member_id,
                            tag:1,
                    }
                   this.$http.post('/admin/member/index.php?act=memberManage&op=allowToLogin',rowdata).then((res)=> {
                    // console.log(res);
                    if (res.code == 1) {
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'success'
                        });
                         row.member_state=1;   
                      //  this.getList();                      
                    }else {
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'error'
                        });                    
                    }
                }) 
            }).catch((res) => {
                console.log(res)
            })
        },
        closeEdit(){
            this.getList();
        },
        expertData() {
            /* var host = location.host.replace('admin', api);
            var url = location.protocol + "//" + host + '/admin/appointment/index.php?act=appoint&op=appointList&is_export=1';
            var searchData = this.searchObj;
            for (var key in searchData) {
                if (!(searchData[key] === null || searchData[key] === '' || searchData[key] === undefined || key === 'page' || key === 'pageSize' || key === 'currentPage')) {
                    url += '&' + key + '=' + searchData[key]
                }
            }
            console.log(url);
            window.location.href = url; */
        },
        handleSizeChange(eachNum) {
            localStorage.setItem('eachNum', eachNum);
            this.searchContent.eachNum = eachNum;
            this.searchContent.page = 1;
            this.getList();
        },
        handleCurrentChange(page) {
            this.searchContent.page = page;
            this.getList();
        },
        // 重置
        resetSearchData() {
            this.searchContent={
                page:1,
                eachNum:localStorage.getItem('eachNum')*1||10,
            }
        },
        // 搜索
        search() {
            this.searchContent.page = 1;
            this.searchObj = {
                search_key: this.searchContent.search_key,
                search_value:this.searchContent.search_value,
                search_state:this.searchContent.search_state,
                search_sort: this.searchContent.search_sort,
                search_heavy_buyer: this.searchContent.search_heavy_buyer,
            }
            this.getList();
        },        
		getList(){
            var data = this.searchObj;
            data.page = this.searchContent.page;
            data.eachNum = this.searchContent.eachNum;
            // console.log(data);
            this.$http.post('/admin/member/index.php?act=memberManage&op=list',data).then((res)=> {
                // console.log(res);
                if (res.code == 1) {
                    if (res.data && res.data.list.length) {
                        // this.memberList = res.data.list;
                        this.total = parseInt(res.data.count);
                        this.memberList = res.data.list.map(function(item) {
                            return {
                                member_id: item.member_id,
                                member_name: item.member_name,
                                company: item.company,
                                member_login_num: item.member_login_num,
                                member_login_time: item.member_login_time,
                                member_login_ip: item.member_login_ip,
                                member_points: item.member_points,
                                member_state: item.member_state,
                                member_cars_count_cache: item.member_cars_count_cache
                            }
                        });                        
                    } else {
                        this.memberList = [];
                        this.total = 0;
                    }
                    if(res.data.vipList){
                        this.jituanList = this.reset_headers_params(res.data.vipList);
                    }else{
                        this.jituanList = [];
                    }
                }
                else if (res.code == 2001) {
                    this.memberList = [];
                    this.total = 0;
                }
                else {
                    alert(res.msg);
                }
            })			
        },
    },
    mounted() {
        resize(this)
    },
};
</script>
<style lang="scss" scoped>
    .on-sale-good-car {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .putaway-time-wrapper {
                .putaway-time-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
    }
	.bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>